<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img :src="bannerImg" alt="" class="banner-img">
            <div class="banner-info">
                <div class="banner-tittle">{{this.sightName}}</div>
                <div class="banner-number">
                    <span class="iconfont banner-iconfont">&#xe67d;</span>
                    {{this.gallaryImgs.length}}
                </div>
            </div>
        </div>
        <FadeAnimation>
            <CommonGallary :imgs="gallaryImgs" v-show="showGallaty" @close="closeGallary"></CommonGallary>
        </FadeAnimation>
    </div>
</template>

<script>
import CommonGallary from '@/common/gallary/gallary'
import FadeAnimation from '@/common/fade/fadeAnimation'
export default {
    name: 'DetailBanner',
    props: {
        sightName:String,
        bannerImg:String,
        gallaryImgs:Array
    },
    data () {
        return {
            imgs:["/static/img/index01.jpeg"],
            showGallaty: false
        }
    },
    components: {
        CommonGallary,
        FadeAnimation
    },
    methods: {
        handleBannerClick () {
            this.showGallaty = true
        },
        closeGallary () {
            this.showGallaty = false
        }
    }
}
</script>

<style lang="stylus" scoped>
    .banner
        position relative
        overflow hidden
        height 0
        padding-bottom 55%
        // background red
        .banner-img
            width 100%
        .banner-info
            display flex
            position absolute
            left 0
            right 0
            bottom 0
            line-height .6rem
            color #fff
            background-image linear-gradient(top , rgba(0 , 0 , 0 , 0) , rgba(0 , 0 , 0 , 0.8))
            .banner-tittle
                flex 1
                font-size .32rem
                padding 0 .2rem
            .banner-number
                height .32rem
                line-height .32rem
                margin-top .14rem
                padding 0 .4rem
                border-radius .2rem
                background rgba(0 , 0 , 0 , 0.7)
                font-size .24rem
                .banner-iconfont
                    font-size .24rem
</style>